<!--
@description ：访客雷达数据分析
-->

<template>
  <div class="app-container">
    <div class="header-title" style="display: flex">
      <div class="text">数据分析</div>
      <div class="button">
<!--        <el-button size="small" @click="$router.go(-1)" type="primary">确 认</el-button>-->
        <el-button size="small" class="btn_cancel" @click="$router.go(-1)">返 回</el-button>
      </div>
    </div>
    <div class="data-textarea">
      <div class="data-card" style="margin-left: 0">
        <div class="data-info">
          <div>
            <svg-icon icon-class="allPeopleCount" style="font-size: 26px"></svg-icon>
            总访问人数
          </div>
          <el-tooltip
            content="访问雷达的总客户数，一个客户访问多次计为1"
            effect="dark" placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ allPeopleCount || 0 }}
        </div>
      </div>
      <div class="data-card">
        <div class="data-info">
          <div>
            <svg-icon icon-class="todayPropleCount" style="font-size: 26px"></svg-icon>
            今日访问人数
          </div>
          <el-tooltip
            content="今日访问雷达的客户数"
            effect="dark" placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ todayPeopleCount || 0 }}
        </div>
      </div>
      <div class="data-card">
        <div class="data-info">
          <div>
            <svg-icon icon-class="allFrequency" style="font-size: 26px"></svg-icon>
            总访问次数
          </div>
          <el-tooltip
            content="雷达累计被访问的次数，一个客户访问多次计为多"
            effect="dark" placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ allFrequency || 0 }}
        </div>
      </div>
      <div class="data-card" style="margin-right: 0">
        <div class="data-info">
          <div>
            <svg-icon icon-class="todayFrequency" style="font-size: 26px"></svg-icon>
            今日访问次数
          </div>
          <el-tooltip
            content="今日雷达累计被访问的次数，一个客户访问多次计为多"
            effect="dark" placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ todayFrequency || 0 }}
        </div>
      </div>
    </div>
    <div class="data-table">
      <el-tabs v-model="activeTab" @tab-click="tabClick">
        <el-tab-pane label="客户分析" name="0"></el-tab-pane>
        <el-tab-pane label="员工分析" name="1"></el-tab-pane>
      </el-tabs>
      <div class="data-tabs">
        <div>
          <NormalForm :enum-opt.sync="enumOpt" :formList="activeTab == '0' ? formList : formList1" :isShowCard="false"
                      :operateForm="activeTab == '0' ?queryForm: queryForm1"
                      :show-search-btn="showSearchBtn" @handleQuery="handleQuery"
                      @handleReset="handleReset"></NormalForm>
        </div>
        <div style="text-align: right; margin: 12px 0;">
          <el-button type="primary" @click="exportData">数据导出</el-button>
        </div>
        <el-table v-if="activeTab == '0'" v-loading="loading" :data="tableList" max-height="560" min-height="420"
                  style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" label="客户信息" min-width="200" prop="customerName">
            <template slot-scope="{ row }">
              <div style="display: flex;align-items: center;justify-content: center">
                <img :src="row.customerImage" alt="" v-if="row.customerImage" style="width:30px; height:30px;border-radius:50%;margin-right:6px">
               <span style="line-height: 30px">{{row.customerName}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="姓名" min-width="140" prop="customerName"></el-table-column>
          <el-table-column align="center" label="手机号" min-width="140" prop="phone"></el-table-column>
          <el-table-column align="center" label="所属成员" min-width="140" prop="sysUserName"></el-table-column>
          <el-table-column align="center" label="最近点击时间" min-width="180" prop="newestClickTime"></el-table-column>
          <el-table-column align="center" label="最近点击渠道" min-width="160" prop="clickSource"></el-table-column>
          <el-table-column align="center" label="停留时长(S)" min-width="140" prop="viewTime"></el-table-column>
          <el-table-column align="center" label="浏览率" min-width="140" prop="viewRate"></el-table-column>
          <el-table-column align="center" label="客户访问总次数" min-width="140" prop="viewAllCount"></el-table-column>
          <el-table-column align="center" label="操作" min-width="120">
            <template slot-scope="{ row }">
              <el-button type="text" v-if="row.isNewAdd" @click="$router.push({ name: 'CustomerDetails',query: {sid: row.sid}})">客户详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination v-if="activeTab == '0'" :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize"
                          :total="total"
                          @handleCurrentChange="getListFn"
                          @handleSizeChange="getListFn"></NormalPagination>
        <el-table v-if="activeTab == '1'" v-loading="loading" :data="tableList1" max-height="560" min-height="420"
                  style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" label="超级企微" min-width="200" prop="userName">
            <template slot-scope="{ row }">
              <div style="display: flex;align-items: center;justify-content: center">
                <img :src="row.userImage" alt="" v-if="row.userImage" style="width:30px; height:30px;border-radius:50%;margin-right:6px">
                <span style="line-height: 30px">{{row.userName}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发送雷达次数" prop="allSendCount"></el-table-column>
          <el-table-column align="center" label="雷达被访问次数" prop="allViewCount"></el-table-column>
          <el-table-column align="center" label="雷达被访问客户数" prop="allViewCustomerCount"></el-table-column>
        </el-table>
        <NormalPagination v-if="activeTab == '1'" :currentPage="queryForm1.pageNum" :pageSize="queryForm1.pageSize"
                          :total="total1"
                          @handleCurrentChange="getListFn"
                          @handleSizeChange="getListFn"></NormalPagination>
        <hr style="margin-top: 12px;border: 1px solid #fff;"/>
      </div>
    </div>
  </div>
</template>
<script>

import {queryCustomerRadarData, queryRadarData, queryUserList, queryUserRadarData} from "@/api/visitorRadar";
import moment from "moment";
import {downLoadFile} from "@/utils/common";
export default {
  name: "visitorRadarDataAnalyze", //访客雷达数据分析
  props: {},
  components: {},
  data() {
    return {
      allPeopleCount: 0,
      todayPeopleCount: 0,
      allFrequency: 0,
      todayFrequency: 0,
      activeTab: 0,
      formList: [
        {
          label: '客户信息',
          value: '',
          prop: 'customerInfo',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '成员',
          value: [],
          prop: 'weUserId',
          type: 'CASCADER',
          emunName: 'weUserIdList',
          multiple: false,
        },
        {
          label: '最近点击时间:',
          value: [],
          prop: 'selectTime',
          type: '',
          emunName: '',
          showLabel: true,
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
      ],
      formList1: [
        {
          label: '成员',
          value: [],
          prop: 'weUserId',
          type: 'CASCADER',
          emunName: 'weUserIdList',
          multiple: false,
        },
      ],
      enumOpt: {
        weUserIdList: [],
      },
      queryForm: {
        customerInfo: '',
        userId: '',
        weUserId: [],
        selectTime: [],
        pageNum: 1,
        pageSize: 20,
      },
      queryForm1: {
        weUserId: [],
        pageNum: 1,
        pageSize: 20,
      },
      showSearchBtn: true,
      loading: false,
      tableList: [],
      total: 0,
      tableList1: [],
      total1: 0,
    }
  },
  watch: {},
  methods: {
    searchHeader() {
      queryRadarData({radarId: this.$route.query.id}).then(res => {
        if (res.code == 200) {
          this.allPeopleCount = res.data.allViewPersonCount || 0;
          this.todayPeopleCount = res.data.todayViewPersonCount || 0;
          this.allFrequency = res.data.allViewCount || 0;
          this.todayFrequency = res.data.todayViewCount || 0;
        }
      })
    },
    tabClick(val) {
      console.log(val)
      this.handleQuery()
    },
    handleQuery() {
      if (this.activeTab == '0') {
        this.queryForm.pageNum = 1
      } else if (this.activeTab == '1') {
        this.queryForm1.pageNum = 1
      }
      this.getListFn()
    },
    handleReset() {
      if (this.activeTab == '0') {
        this.queryForm = {
          customerInfo: '',
          staffList: [],
          clickTime: [],
          pageNum: 1,
          pageSize: 20,
        }
      } else if (this.activeTab == '1') {
        this.queryForm1 = {
          staffList: [],
          pageNum: 1,
          pageSize: 20,
        }
      }
      this.getListFn()
    },
    getListFn() {
      if (this.activeTab == '0') {
        let params = {
          customerName: this.queryForm.customerInfo,
          userId: this.queryForm.weUserId ? this.queryForm.weUserId[this.queryForm.weUserId.length - 1] : '',
          startTime: this.queryForm.selectTime && this.queryForm.selectTime.length > 0 ? moment(this.queryForm.selectTime[0]).format('YYYY-MM-DD') : '',
          endTime: this.queryForm.selectTime && this.queryForm.selectTime.length > 0 ? moment(this.queryForm.selectTime[1]).format('YYYY-MM-DD') : '',
          pageNum: this.queryForm.pageNum,
          pageSize: this.queryForm.pageSize,
          radarId: this.$route.query.id
        }
        this.loading = true
        queryCustomerRadarData(params).then(res => {
          if (res.code == 200) {
            this.tableList = res.rows || []
            this.total = res.total || 0
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else {
        let params = {
          userId: this.queryForm1.weUserId ? this.queryForm1.weUserId[this.queryForm1.weUserId.length - 1] : '',
          pageNum: this.queryForm.pageNum,
          pageSize: this.queryForm.pageSize,
          radarId: this.$route.query.id
        }
        queryUserRadarData(params).then(res => {
          if (res.code == 200) {
            this.tableList1 = res.rows || []
            this.total1 = res.total || 0
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    },
    exportData() {
      if (this.activeTab == '0') {
        let params = {
          customerName: this.queryForm.customerInfo,
          userId: this.queryForm.weUserId ? this.queryForm.weUserId[this.queryForm.weUserId.length - 1] : '',
          startTime: this.queryForm.selectTime && this.queryForm.selectTime.length > 0 ? moment(this.queryForm.selectTime[0]).format('YYYY-MM-DD') : '',
          endTime: this.queryForm.selectTime && this.queryForm.selectTime.length > 0 ? moment(this.queryForm.selectTime[1]).format('YYYY-MM-DD') : '',
          radarId: this.$route.query.id
        }
        downLoadFile('/admin/visitorRadar/customerDataExport', params, '客户分析.xlsx')
      } else if (this.activeTab == '1') {
        let params1 = {
          userId: this.queryForm1.weUserId ? this.queryForm1.weUserId[this.queryForm1.weUserId.length - 1] : '',
          radarId: this.$route.query.id
        }
        downLoadFile('/admin/visitorRadar/userDataExport', params1, '员工分析.xlsx')
      }
    },
  },
  mounted() {
    queryUserList().then(res => {
      this.enumOpt.weUserIdList = res.rows && res.rows.length > 0 ? res.rows.map(item => {
        return {
          value: item.deptId,
          label: item.deptName,
          children: item.userList ? item.userList.map(itm => {
            return {value: itm.userId, label: itm.userName}
          }) : null
        }
      }) : []
    })
    this.handleQuery()
    this.searchHeader()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.app-container {
  height: 100%;
  padding: 0;

  .header-title {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    background-color: white;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 6px;

    .text {
      font-size: 20px;
    }
  }
}

.data-textarea {
  display: flex;

  .data-card {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    margin: 10px;
    //height: 100px;
    padding: 20px 24px 12px 36px;
  }
}

.data-info {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  font-size: 18px;
  align-items: center;
}

.data-num {
  font-size: 42px;
  font-weight: 500;
  padding-bottom: 10px;
}

.data-table {
  background-color: #fff;
  margin-top: 12px;

  .data-tabs {
    padding: 0 20px;
  }
}

.btn_cancel{
  border-radius: 2px!important;
  border: 1px solid #CCCCCC!important;
  color: #000!important;
  border-radius: 8px;
}
</style>
